import Module from "./module";
import * as echarts from "echarts/core";
import {
	DatasetComponent,
	DatasetComponentOption,
	TooltipComponent,
	TooltipComponentOption,
	GridComponent,
	GridComponentOption,
	LegendComponent,
	LegendComponentOption
} from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([DatasetComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<
	DatasetComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption
>;

const option: EChartsOption = {
	legend: {
		textStyle: {
			color: "#fff"
		},
		itemStyle: {
			decal: {
				symbol: "circle"
			}
		}
	},
	grid: {
		left: "10%",
		top: "15%",
		right: "10%",
		bottom: "15%"
	},
	tooltip: {},
	dataset: {
		// 提供一份数据。
		source: [
			["product", "00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
			["温度", 43.3, 85.8, 93.7, 43.3, 85.8, 93.7, 43.3],
			["湿度", 83.1, 73.4, 55.1, 83.1, 73.4, 55.1, 83.1]
		]
	},
	xAxis: {
		type: "category",
		axisLabel: {
			color: "#BBDAFE"
		},
		axisLine: { show: false },
		axisTick: {
			show: false
		}
	},
	// 声明一个 Y 轴，数值轴。
	yAxis: [
		{
			type: "value",
			position: "left",
			axisLabel: {
				color: "#BBDAFE",
				formatter: function (value: any, index: any) {
					index.toString();
					return value + "℃";
				}
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#314165",
					opacity: 0.5
				}
			}
		},
		{
			type: "value",
			position: "right",
			axisLabel: {
				color: "#BBDAFE",
				formatter: function (value: any, index: any) {
					index.toString();
					return value + "%";
				}
			},
			splitLine: {
				show: false
			}
		}
	],
	// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
	series: [
		{
			name: "温度",
			type: "line",
			smooth: true,
			yAxisIndex: 1,
			seriesLayoutBy: "row",
			lineStyle: {
				color: "#13CEBF",
				width: 3
			},
			itemStyle: {
				opacity: 0
			},
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#13CEBF" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#13CEBF00" //100% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			}
		},
		{
			name: "湿度",
			type: "line",
			smooth: true,
			yAxisIndex: 0,
			seriesLayoutBy: "row",
			lineStyle: {
				color: "#FFA011",
				width: 3
			},
			itemStyle: {
				opacity: 0
			},
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#FFB60C" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#FFB60C00" //1% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			}
		}
	]
};

export default defineComponent({
	name: "TemHumDetection",
	setup() {
		const chartDom = ref();
		onMounted(() => {
			setTimeout(() => {
				const myChart = echarts.init(chartDom.value);
				option && myChart.setOption(option);
			}, 500);
		});
		return () => (
			<Module title={"温湿度监测分析"}>
				<div className={"w-full h-[80%]"} ref={chartDom}></div>
			</Module>
		);
	}
});
